<template>
  <div class="font-con">
    <div class="main-con">
      <div class="detail-con">
        <div class="detail-item">
          <div class="detail-text">
            <div class="detail-title" title="进入系统" @click="handleClick">
              <h1>{{ data.name }}</h1>
            </div>
            <div class="info">{{ data.describe }}</div>
            <div class="tech">
              <span style="color: black">技术栈：</span>
              {{ data.tech }}
            </div>
          </div>
        </div>
        <div class="detail-item">
          <div class="image-con" :class="[data.imgClass]"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Font",
  props: {
    data: Object
  },

  methods: {
    handleClick() {
      this.$emit("enter-system", this.data.router);
    },
    async curStyle() {
      let img = await import(this.data.url);
      return {
        background: img
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.font-con {
  width: 100%;
  height: 100%;
  padding: 10% 0;
  .main-con {
    width: 100%;
    height: 100%;
    background: #f9f9f9;

    .detail-con {
      width: 100%;
      height: 100%;
      display: flex;
      .detail-item {
        height: 100%;
        flex: 1;
        padding: 0 2rem;
        position: relative;
        .detail-text {
          width: 30rem;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 10rem;
          text-align: left;
          .detail-title {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            cursor: pointer;
          }
          .detail-title:hover {
            color: #57a3f3;
          }
          .info {
            font-size: 1.5rem;
          }
          .tech {
            font-size: 1.2rem;
            margin-top: 2rem;
            color: rgb(45, 183, 245);
          }
        }
        .image-con {
          width: 35rem;
          height: 20rem;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
        }
        .image-con.img1 {
          background: url(~@/assets/images/fullpage3.png) no-repeat;
          background-size: 100% 100%;
        }
        .image-con.img2 {
          background: url(~@/assets/images/oms3.png) no-repeat;
          background-size: 100% 100%;
        }
        .image-con.img3 {
          background: url(~@/assets/images/export3.png) no-repeat;
          background-size: 100% 100%;
        }
        .image-con.img4 {
          background: url(~@/assets/images/vupress.png) no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
}
</style>
